@extends('admin._layout.master')

@section('style')
    <link rel="stylesheet" type="text/css" href="{{ asset('lib/webuploader/0.1.5/webuploader.css') }}" />
@endsection

@section('content')
    <section class="Hui-article-box">
        <nav class="breadcrumb">
            <i class="Hui-iconfont">&#xe67f;</i> 首页
            <span class="c-gray en">&gt;</span> 产品管理
            <span class="c-gray en">&gt;</span> 新增产品
            <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" >
                <i class="Hui-iconfont">&#xe68f;</i>
            </a>
        </nav>
        <div class="pd-20">
            <form id="addForm" class="form form-horizontal" method="post" action="" onsubmit="return false;">
                {{ csrf_field() }}
                <div class="row cl">
                    <label class="form-label col-xs-2"><span class="c-red">*</span>产品分类：</label>
                    <div class="formControls col-xs-4">
                        <span class="select-box">
                            <select name="type" class="select">
                                <option value="">--请选择--</option>
                                @foreach($productTypes as $productType)
                                    <option value="{{ $productType->id }}">
                                        {{ $productType->name }}
                                    </option>
                                @endforeach
                            </select>
                        </span>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-2"><span class="c-red">*</span>产品名：</label>
                    <div class="formControls col-xs-4">
                        <input type="text" class="input-text" name="name" value="">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-2"><span class="c-red">*</span>产品摘要：</label>
                    <div class="formControls col-xs-4">
                        <textarea cols="50" rows="4" name="summary"></textarea>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-2"><span class="c-red">*</span>是否推荐：</label>
                    <div class="formControls col-xs-4">
                        <input type="radio" id="radio-1" name="recommend" value="0">
                        <label for="radio-1">推荐</label>
                        <input type="radio" id="radio-2" name="recommend" value="1" class="ml-20" checked>
                        <label for="radio-2">不推荐</label>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-2"><span class="c-red">*</span>展示图集：</label>
                    <div class="formControls col-xs-6">
                        <div id="uploader" class="wu-example">
                            <div id="thelist1" class="uploader-list"></div>
                            <div class="btns">
                                <div id="picker1">选择图片</div>
                                <button id="ctlBtn1" class="btn btn-default" type="button">开始上传</button>
                                <span class="c-red">（可以一次选择多张图片进行上传）</span>
                            </div>
                        </div>
                        <input type="hidden" id="pictures" name="pictures">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-2"><span class="c-red">*</span>产品介绍：</label>
                    <div class="formControls col-xs-8">
                        <script id="editor" name="introduce" type="text/plain" style="width:100%;height:400px;">

                        </script>
                    </div>
                </div>
                <div class="row cl">
                    <div class="col-xs-8 col-xs-offset-2">
                        <button id="submit" class="btn btn-primary radius" type="button"><i class="Hui-iconfont">&#xe632;</i> 保存并提交</button>
                    </div>
                </div>
            </form>
        </div>
    </section>
@endsection

@section('javascript')
    <script type="text/javascript" src="{{ asset('lib/webuploader/0.1.5/webuploader.js') }}"></script>
    <script type="text/javascript" src="{{ asset('lib/ueditor/1.4.3/ueditor.config.js') }}"></script>
    <script type="text/javascript" src="{{ asset('lib/ueditor/1.4.3/ueditor.all.min.js') }}"> </script>
    <script type="text/javascript" src="{{ asset('lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js') }}"></script>
    <script type="text/javascript">

        var ue = UE.getEditor('editor');

        var uploader1 = WebUploader.create({
            swf: '{{ asset('lib/webuploader/0.1.5/Uploader.swf') }}',
            server: '{{ asset('lib/webuploader/0.1.5/server/fileupload.php') }}',
            pick: {id: '#picker1', multiple: true},
            chunked: true,
            chunkSize: 1024 * 1024,
            formData: {guid: 'yamete1'},
            resize: false,
            accept: {
                title: '图片',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        uploader1.on( 'fileQueued', function( file ) {
            var $list = $('#thelist1');
            $list.append( '<div id="' + file.id + '" class="item">' +
                '<h4 class="info" style="color: #2980B9;">' + file.name + '</h4>' +
                '<p class="state" style="color: #16A085;">等待上传...</p>' +
                '</div>' );
        });
        uploader1.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress-box .sr-only');
            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<div class="progress-box"><span class="progress-bar radius"><span class="sr-only" style="width:0%"></span></span></div>').appendTo( $li ).find('.sr-only');
            }
            $li.find(".state").text("上传中");
            $percent.css( 'width', percentage * 100 + '%' );
        });
        uploader1.on( 'uploadSuccess', function( file ) {
            var original = $('#pictures').val();
            $('#pictures').val(original + file.name + ',');
            $( '#'+file.id ).addClass('upload-state-success').find(".state").text("已上传");
        });
        uploader1.on( 'uploadError', function( file ) {
            $( '#'+file.id ).addClass('upload-state-error').find(".state").text("上传出错");
        });
        uploader1.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress-box').fadeOut();
        });

        $(function () {

            $('#ctlBtn1').click(function () {
                uploader1.upload();
            });

            $('#submit').click(function () {
                $('#addForm').ajaxSubmit({
                    dataType: 'json',
                    success: function (result) {
                        if (result.code == '0') {
                            location.href = '{{ url('admin/product') }}';
                        } else {
                            layer.alert(result.msg, {icon: 5, title: '提示信息'});
                        }
                    }
                });
            });
        });
    </script>
@endsection